<script setup>
import { ref } from 'vue'
import UserTable from '@/components/Tables/UserTable.vue'
import { generateRandomString, randomTime } from '@/utils/mockData'

// 表格列定义（严格对应3.2章节要求）
const tableColumns = ref([
  '用户编号',
  'BU',
  'Email',
  '启用时间',
  '停用时间',
  '排队中的任务数量',
  '进行中的任务数量',
  '操作'
])

// 生成10条模拟数据（完全符合3.2规范）
const users = ref(
  Array.from({ length: 10 }, () => ({
    userId: generateRandomString(10).toUpperCase(),
    bu: generateRandomString(2).toUpperCase(),
    email: `${generateRandomString(5).toLowerCase()}@example.com`,
    enableTime: randomTime(),
    disableTime: randomTime(),
    queuedTasks: Math.floor(Math.random() * 28) + 3,
    runningTasks: Math.floor(Math.random() * 28) + 3
  }))
)

// 处理switch状态变化
const handleSwitchChange = (userId, newVal) => {
  console.log(`用户 ${userId} 状态变更为：${newVal ? '启用' : '停用'}`)
}
</script>

<template>
  <div class="management-view">
    <!-- 标题区域 -->
    <div class="table-header">
      <h2 class="title">运营管理</h2>
      <span class="counter">共 {{ users.length }} 条记录</span>
    </div>

    <!-- 表格容器 -->
    <div class="table-container">
      <UserTable 
        :data="users"
        :columns="tableColumns"
        @switch-change="handleSwitchChange"
      />
    </div>
  </div>
</template>

<style scoped>
.management-view {
  padding: 24px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 0 8px;
}

.title {
  font-size: 18px;
  color: #303133;
  font-weight: 600;
  margin: 0;
}

.counter {
  font-size: 13px;
  color: #909399;
}

.table-container {
  border: 1px solid #ebeef5;
  border-radius: 6px;
  overflow: hidden;
}

@media (max-width: 768px) {
  .management-view {
    padding: 16px;
  }
  
  .table-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .table-container {
    overflow-x: auto;
  }
}
</style>
